<!-- 点击每一个存钱类型时的详细信息页面 -->
<template>
	<view class="showSaveDetail">
		<u-navbar :title="saveTypeDetail.saveName" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="introduce">
			{{saveTypeDetail.introduce}}
		</view>
		<view class="saveplan">
			<view class="saveplan_title">
				<text>存钱计划</text>
				<text @click="showPopup">记一笔</text>
			</view>
			<view class="showSavingPlanDetail">
				<showSavingPlanDetailItem v-for="(item,index) in savingTypeDetailList" :key="item.id" :savingTypeDetailOne='item'/>
			</view>
			<u-popup :show="show" mode="bottom" @close="close">
				<view class="savePlan_input">
					<text>{{saveTypeDetail.saveName}}</text>
					<view class="saveIntroduce">
						{{saveTypeDetail.saveName}}可以存<text>{{avgMoeny}}</text>元
					</view>
					<view class="input">
						<u--form labelPosition="left" :model="saveInfo" :rules="rules" ref="form">
							<u-form-item prop="plan">
								<u--input v-model="saveInfo.plan" border="surround" placeholder="请输入存钱计划"></u--input>
							</u-form-item>
							<u-form-item prop="startTime">
								<u-datetime-picker @confirm="changeDatetime" @cancel="showDatetime=false"
									:show="showDatetime" v-model="saveInfo.startTime" mode="date"></u-datetime-picker>
								<view @click="showDatetime=true" class="showDatetime">
									<text>开始时间</text>
									<text>{{formateDate}}</text>
								</view>
							</u-form-item>
							<u-form-item v-if="saveTypeDetail.id===4" label="定额" prop="chooseTime" borderBottom
								@click="showChooseTime = true">
								<u--input v-model="saveInfo.chooseTime" disabled disabledColor="#ffffff"
									placeholder="请选择定额时间" border="none"></u--input>
								<u-icon slot="right" name="arrow-right"></u-icon>
								<u-picker :show="showChooseTime" @cancel="showChooseTime = false" :columns="columns" @confirm="chooseTImeFn"></u-picker>
							</u-form-item>
							<u-form-item v-if="saveTypeDetail.id===5||saveTypeDetail.id===6" prop="chooseTime">
								<view class="freedomSave">
									<text>随机模式</text>
									<u--input border='none' v-model="saveInfo.chooseTime"></u--input>
									天
								</view>
							</u-form-item>
							<u-form-item v-if="saveTypeDetail.id!==5&&saveTypeDetail.id!==6" prop="endTime">
								<view class="showDatetime">
									<text>结束时间</text>
									<text>{{endDate}}</text>
								</view>
							</u-form-item>
							<u-form-item prop="money">
								<u--input placeholder="请输入存钱金额" border="surround" v-model="saveInfo.money">
								</u--input>
							</u-form-item>
							<u-form-item v-if="saveTypeDetail.id===6" prop="increase">
								<view class="increase">
									<text>递增金额</text>
									<u--input border='none' v-model="saveInfo.increase"></u--input>
									元
								</view>
							</u-form-item>
						</u--form>
						
						<u-button @click='saveMoenyFn' type="success" text="确定"></u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {saveMoenyAPI,getTypeSavingDetailAPI} from '@/api/api.js'
	import showSavingPlanDetailItem from '@/components/showSavingPlanDetail_item.vue'
	export default {
		components:{
			showSavingPlanDetailItem
		},
		data() {
			return {
				savingTypeDetailList:[],
				showChooseTime: false,
				columns: [[365,52,12]],
				saveTypeDetail: {},
				show: false,
				showDatetime: false,
				saveInfo: {
					plan: '',
					startTime: Number(new Date()),
					money: 1,
					saveTime: 0,
					chooseTime: 365,
					increase:0
				},
				rules: {
					plan: {
						type: 'string',
						required: true,
						message: '请输入存钱计划',
						trigger: ['blur', 'change']
					},
					startTime: {
						type: 'string',
						required: true,
						message: '请选择开始时间',
						trigger: ['change']
					},
					money: {
						type: 'number',
						required: true,
						message: '请输入存钱金额',
						trigger: ['blur', 'change']
					},
					chooseTime: {
						type: 'number',
						required: true,
						message: '请选择定额类型',
						trigger: ['blur', 'change']
					},
					increase:{
						type: 'number',
						required: true,
						message: '请选择递增金额',
						trigger: ['blur', 'change']
					}
				}
			}
		},
		computed: {
			formateDate() {
				return this.$moment(this.saveInfo.startTime).format('YYYY-MM-DD')
			},
			endDate() {
				return this.$moment(this.saveInfo.startTime + 31104000000).format('YYYY-MM-DD')
			},
			avgMoeny() {
				this.saveInfo.saveTime = this.saveTypeDetail.id === 1 ? 365 : this.saveTypeDetail.id === 2 ? 52 : this
					.saveTypeDetail.id === 3 ? 12 : this.saveTypeDetail.id === 4 ? this.saveInfo.chooseTime : this
					.saveTypeDetail.id === 5 ? this.saveInfo.chooseTime : this.saveInfo.chooseTime
				// // this.saveTime=this.saveTypeDetail.id===1?365:this.saveTypeDetail.id===2?52:this.saveTypeDetail.id===3?12:this.saveTypeDetail.id===4?this.chooseTime:this.saveTypeDetail.id===5?this.chooseTime:this.chooseTime
				// console.log(this.saveTypeDetail.id)
				// return this.saveTime * this.saveInfo.money
				let countAvgMoeny=this.saveInfo.saveTime * this.saveInfo.money
				if(this.saveInfo.increase!==0){
					for(let i=0;i<this.saveInfo.saveTime;i++){
						countAvgMoeny+=this.saveInfo.increase*i
					}
				}
				return countAvgMoeny
			}

		},
		methods: {
			changeDatetime(value) {
				this.showDatetime = false
				this.saveInfo.startTime = value
			},
			rightClick() {
				uni.navigateBack({
					delta: 1
				});
			},
			showPopup() {
				this.show = true
			},
			close() {
				this.show = false
			},
			chooseTImeFn(e) {
				
				this.saveInfo.chooseTime = e.value[0]
				this.$refs.form.validateField('chooseTime')
				this.showChooseTime=false
			},
			async saveMoenyFn(){
				const saveMoenyObj={}
				saveMoenyObj.saveTypeId=this.saveTypeDetail.id
				saveMoenyObj.savePlan=this.saveInfo.plan
				saveMoenyObj.startTime=this.saveInfo.startTime
				saveMoenyObj.avgMoeny=this.avgMoeny
				saveMoenyObj.money=this.saveInfo.money
				saveMoenyObj.increase=this.saveInfo.increase
				saveMoenyObj.saveTime=this.saveInfo.saveTime
				const res=await saveMoenyAPI(saveMoenyObj)
				this.show=false
				this.$bus.$emit('updateSavingPlan')
				this.getTypeSavingDetail()
			},
			async getTypeSavingDetail(){
				const res=await getTypeSavingDetailAPI(this.saveTypeDetail.id)
				this.savingTypeDetailList=res.data
			}
		},
		mounted() {
			this.$bus.$on('getSaveTypeInfo', (value) => {
				this.saveTypeDetail = value
				this.getTypeSavingDetail()
			})
		},
		beforeDestroy() {
			this.$bus.$off('getSaveTypeInfo')
		}
	}
</script>

<style scoped>
	.showSaveDetail {
		position: fixed;
		height: 100%;
		background-color: pink;
		width: 100%;
	}

	.introduce {
		width: 650rpx;
		margin: 100rpx auto;
		color: white;
		font-weight: bold;
	}

	.saveplan {
		width: 650rpx;
		height: 100%;
		background-color: white;
		margin: 0px auto;
		border-radius: 20rpx;
		overflow: scroll
	}

	.saveplan_title {
		width: 600rpx;
		height: 100rpx;
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
	}

	.saveplan_title>text:nth-child(2) {
		background-color: #879892;
		padding: 20rpx 30rpx;
		border-radius: 40rpx;
	}

	.savePlan_input {
		margin: 0rpx auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.savePlan_input>text:nth-child(1) {
		font-weight: bolder;
	}

	.saveIntroduce {
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.saveIntroduce>text {
		color: pink;
	}

	.input {
		width: 600rpx;
	}

	.showDatetime {
		width: 600rpx;
		height: 80rpx;
		border: 1rpx solid #ccc;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx;
		box-sizing: border-box;
	}
	.freedomSave{
		display: flex;
		height: 40px;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		border: 1px solid #ccc;
		border-radius: 20rpx;
		
	}
	.freedomSave>text{
		width: 450rpx;
	}
	.increase{
		display: flex;
		height: 40px;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		border: 1px solid #ccc;
		border-radius: 20rpx;
	}
	.increase>text{
		width: 450rpx;
	}
	.showSavingPlanDetail{
		width: 100%;
		height: 60%;
		overflow: scroll;
	}
	
</style>
